<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import useDialog from '@/hooks/useDialog';
import { ElForm } from 'element-plus';
import { getHistoryAlarm } from '@/api/deviceAlarms';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { alarm_type } = toRefs<any>(proxy?.useDict('alarm_type'));
const { alarm_status } = toRefs<any>(proxy?.useDict('alarm_status'));
const { visible, title, openDialog, closeDialog } = useDialog({ title: '报警详情' });

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  alarmTitle: '', // 报警标题
  alarmType: '', // 报警类型
  alarmCode: '', // 工单编号
  status: '', // 状态
  startTime: '',
  endTime: '',
  timeRange: [],
  searchType: 'DAY' // 默认选择日
});

// 时间类型选项
const timeOptions = [
  { label: '日', value: 'DAY' },
  { label: '月', value: 'MONTH' },
  { label: '年', value: 'YEAR' },
  { label: '自定义', value: 'CUSTOM' }
];

// 报警类型选项
const alarmTypeOptions = [
  { label: '设备告警', value: '1' },
  { label: '系统告警', value: '2' },
  { label: '业务告警', value: '3' }
];

// 状态选项
const statusOptions = [
  { label: '未处理', value: '0' },
  { label: '处理中', value: '1' },
  { label: '已处理', value: '2' },
  { label: '已关闭', value: '3' }
];

// 表格数据
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);

// 查询表单ref
const queryFormRef = ref<InstanceType<typeof ElForm>>();

// 查询方法
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置查询
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

// 时间类型改变
const handleTimeTypeChange = (value: string) => {
  if (value !== 'custom') {
    queryParams.timeRange = [];
    queryParams.startTime = '';
    queryParams.endTime = '';
  }
};

// 获取列表数据
const getList = async () => {
  loading.value = true;
  try {
    const res = await getHistoryAlarm({
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      alarmTitle: queryParams.alarmTitle,
      alarmType: queryParams.alarmType,
      alarmCode: queryParams.alarmCode,
      status: queryParams.status,
      sTime: queryParams.startTime,
      eTime: queryParams.endTime,
      searchType: queryParams.searchType
    });
    tableData.value = res.rows;
    total.value = res.total;
  } catch (error) {
    console.error('获取报警列表失败:', error);
  } finally {
    loading.value = false;
  }
};

// 对外暴露方法
defineExpose({
  open: openDialog,
  close: closeDialog
});

// 组件挂载时获取数据
onMounted(() => {
  getList();
});
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :modal="false"
    :draggable="true"
    width="70%"
    append-to-body
    class="largeScreen-dialog alarm-detail-dialog"
    :before-close="closeDialog"
  >
    <!-- 查询表单 -->
    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
      <el-form-item label="报警标题" prop="alarmTitle">
        <el-input v-model="queryParams.alarmTitle" placeholder="请输入报警标题" clearable />
      </el-form-item>
      <el-form-item label="报警类型" prop="alarmType">
        <el-select v-model="queryParams.alarmType" placeholder="请选择报警类型" clearable class="select_box" popper-class="select-popper">
          <el-option v-for="dict in alarm_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="工单编号" prop="alarmCode">
        <el-input v-model="queryParams.alarmCode" placeholder="请输入工单编号" clearable />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="select_box" popper-class="select-popper">
          <el-option v-for="dict in alarm_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" prop="searchType">
        <el-radio-group v-model="queryParams.searchType" @change="handleTimeTypeChange">
          <el-radio-button v-for="item in timeOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="queryParams.searchType === 'CUSTOM'" prop="timeRange">
        <el-date-picker
          v-model="queryParams.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          @change="
            (val) => {
              queryParams.startTime = val?.[0] || '';
              queryParams.endTime = val?.[1] || '';
            }
          "
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <div class="largeScreen-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-background="rgba(0,0,0,0.2)"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '0px' }"
      >
        <el-table-column prop="alarmTitle" label="报警标题" min-width="150" show-overflow-tooltip align="center" />
        <el-table-column prop="alarmType" label="报警类型" min-width="100" show-overflow-tooltip align="center">
          <template #default="scope">
            <dict-tag :options="alarm_type" :value="scope.row.alarmType" />
          </template>
        </el-table-column>
        <el-table-column prop="alarmCode" label="工单编号" min-width="120" show-overflow-tooltip align="center" />
        <el-table-column prop="value" label="报警值" min-width="160" show-overflow-tooltip align="center">
          <template #default="scope">
            {{ Number(scope.row.value).toFixed(2) + (scope.row.unit || '') }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处置状态" min-width="200" show-overflow-tooltip align="center">
          <template #default="scope">
            <dict-tag :options="alarm_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column prop="alarmTime" label="报警时间" min-width="160" show-overflow-tooltip align="center" />
      </el-table>
    </div>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </el-dialog>
</template>

<style scoped lang="scss">
.alarm-detail-dialog {
  :deep(.el-dialog__body) {
    background-color: #083577;
    padding: 20px;
  }
}

.input_box {
  // 默认状态样式更改
  height: 30px;
  --el-input-bg-color: rgba(30, 109, 235, 0.2) !important;
  --el-input-border-color: transparent !important;
  --el-input-focus-border-color: transparent !important;
  --el-input-hover-border-color: transparent !important;

  /* 只更改具有.el-input类名的元素的占位符文本样式 */
  :deep(.el-input__inner::placeholder) {
    font-size: 14px;
    font-weight: 500;
    color: white;
    opacity: 0.6;
  }

  // 清除按钮
  :deep(.el-input__clear) {
    color: white !important;
  }

  :deep(.el-input__inner) {
    color: white !important; // 字体色
    box-shadow: inset 0 0 8px 0 rgba(4, 91, 189, 0.6); // 添加内阴影
  }
}

.select_box {
  :deep(.el-select__wrapper) {
    background-color: rgba(30, 109, 235, 0.2);
    box-shadow: inset 0 0 8px 0 rgba(4, 91, 189, 0.6);
    border: none;
  }

  :deep(.el-input__inner) {
    color: white !important; // 字体色
    box-shadow: inset 0 0 8px 0 rgba(4, 91, 189, 0.6); // 添加内阴影
  }

  :deep(.el-select__placeholder) {
    color: white;
    opacity: 0.9;
  }
}
</style>

<style lang="scss">
.largeScreen-dialog {
  .el-dialog__header {
    padding: 20px;
    background-color: #083577;
    margin: 0;

    .el-dialog__title {
      color: #0be4f1;
      font-size: 20px;
      font-weight: bold;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: #0be4f1;
      }
    }
  }

  .el-dialog__body {
    background-color: #083577;
    padding: 20px;
  }

  .el-form {
    margin-bottom: 10px;

    .el-form-item__label {
      color: #0be4f1 !important;
    }

    .el-input__wrapper {
      background-color: rgba(30, 109, 235, 0.2) !important;
      box-shadow: inset 0 0 8px 0 rgba(4, 91, 189, 0.6) !important;
      border: none !important;
    }

    .el-input__inner {
      color: white !important;
      &::placeholder {
        color: white !important;
        opacity: 0.9;
      }
    }

    .el-date-editor .el-input__wrapper {
      background-color: rgba(30, 109, 235, 0.2) !important;
      box-shadow: inset 0 0 8px 0 rgba(4, 91, 189, 0.6) !important;
      border: none !important;
    }

    .el-date-editor .el-input__inner {
      color: white !important;
      &::placeholder {
        color: white !important;
        opacity: 0.9;
      }
    }

    .el-date-editor .el-range-separator {
      color: white !important;
    }

    .el-date-editor .el-range-input {
      color: white !important;
      &::placeholder {
        color: white !important;
        opacity: 0.9;
      }
    }
  }

  .largeScreen-table {
    .el-table {
      --el-table-border-color: #004e70;
      --el-table-header-bg-color: transparent;
      --el-table-row-hover-bg-color: transparent;
      --el-table-text-color: #fff;
      --el-table-header-text-color: #00ffff;
      --el-table-border: none;

      background-color: transparent;

      .el-table__header-wrapper th {
        background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
        color: #0ff;
      }

      .el-table__body {
        tr {
          background-color: #083577;
          color: #fff;

          td {
            border-bottom: 1px solid #0a73a0;
          }
        }
      }

      .el-table__empty-block {
        background-color: #003556;

        .el-table__empty-text {
          color: #00ffff;
          font-size: 24px;
        }
      }

      .el-table__body-wrapper {
        &::-webkit-scrollbar {
          width: 0.5rem;
          height: 0.5rem;
          background-color: #3f8af3;
          border-radius: 0.375rem;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #1c4682;
          border-radius: 0.375rem;
        }
      }
    }
  }

  .pagination-container {
    background: #083577;
    padding: 10px 16px;
    text-align: right;
    margin: 0;
  }

  .el-pagination__total {
    color: #fff;
  }

  .el-pagination__jump {
    color: #fff;
  }

  .el-form {
    .el-radio-group {
      .el-radio-button__inner {
        background-color: rgba(30, 109, 235, 0.2);
        border-color: #0be4f1;
        color: #0be4f1;
      }

      .el-radio-button__original-radio:checked + .el-radio-button__inner {
        background-color: #0be4f1;
        color: #083577;
        box-shadow: -1px 0 0 0 #0be4f1;
      }
    }
  }
}
</style>
